<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>奥运五环</title>
</head>
<body>
<div class="ALL_three">
        <p class="qwe"></p>
        <p class="asd"></p>
        <p class="zxc"></p>
    </div>
    <div class="ALL_tow">
        <p class="poi all_style"></p>
        <p class="lkj all_style"></p>
    </div>
    <style>
       .ALL_three{
        display: flex;
       }
       .all_style{
        width: 300px;
        height: 300px;
        border-radius: 50%;
       }
       .qwe{
            width: 300px;
            height: 300px;
            border-radius: 50%;
            border: 10px solid blue;
        }
        .asd{
            width: 300px;
            height: 300px;
            border-radius: 50%;
            border: 10px solid black;
            margin-left: 20px;
        }
        .zxc{
            width: 300px;
            height: 300px;
            border-radius: 50%;
            border: 10px solid red;
            margin-left: 20px;
        }
        .ALL_tow{
            display: flex;
        }
        .poi{
            border: 10px solid yellow;
            margin: -125px 170px 100px;
        }
        .lkj{
            border: 10px solid green;
            margin: -125px -150px;
        }
    </style>
</body>
</html>